<template>
  <div class="page padding-safe-area-bottom">
    <div class="scroll-view">
      <mt-actionsheet :actions="actions" v-model="chooseVisible"/>
      <customHeader middleTitle="产品建议" @leftCallBack="goBack"/>
      <div class="notice">
        <!-- <i class="zhk-bf-svg"></i> -->
        <span>如遇到：到账异常、交易异常等，请直接联系销售经理</span>
      </div>
      <div class="page-body">
        <div class="cell">
          <div class="cell-title">建议</div>
          <div class="cell-subtitle">为了更好的为您服务，请告诉我们您的建议</div>
          <textarea class="cell-textarea" placeholder="请输入10字以上的描述，方便我们更清楚了解您的问题，最多300个字" v-model.trim="formData.feedback" maxlength="300"></textarea>
        </div>
        <div class="cell">
          <div class="cell-title">问题图片</div>
          <div class="cell-subtitle">请提交能充分反映相关问题的照片或者截图</div>
          <ul class="cell-ul">
            <li v-for="(item,index) in formData.picUrls" :key="index">
              <img :src="item" @click="showImg(item)"/>
              <span class="zhk-sbylx" @click="delImage(index)"></span>
            </li>
            <li @click="uploadImg" class="upload" v-if="formData.picUrls.length<4">
              <i class="zhk-sczp" style="color:#999"></i>
            </li>
          </ul>
        </div>
        <div class="cell">
          <div class="cell-title">联系方式</div>
          <div class="cell-subtitle">请留下您的联系方式以便我们更好的解决问题</div>
          <!-- <mt-field class="cell-field" label="手机号" placeholder="请填写" v-model.trim="formData.contact" :attr="{maxlength: 11}"></mt-field> -->
          <div class="mint-cell mint-field cell-field">
            <div class="mint-cell-wrapper">
              <div class="mint-cell-title">
                <span class="mint-cell-text">手机号</span>
              </div>
              <div class="mint-cell-value">
                <inputClear warpClass="cell-ipt" :limitVal="limitVal" v-model="formData.contact" placeholder="请填写" :maxlength="11"/>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="btn" :class="{disabled: !disabled}" @click="onSubmit">提交</div>
    </div>
  </div>
</template>

<script>
import customHeader from "../../components/header/header";
import inputClear from "../../components/inputClear/inputClear";
import { Toast, MessageBox } from "mint-ui";
import jsBridge from "../../tools/jsBridge.js";
import config from "../../base/profile/config.json";

export default {
  name: "feedback",
  components: {
    customHeader,
    inputClear
  },
  data() {
    return {
      submitStatus: false,
      actions: [],
      chooseVisible: false,
      formData: {
        feedback: '',
        contact: '',
        picUrls: []
      }
    };
  },
  computed: {
    disabled() {
      return this.formData.feedback && this.formData.picUrls.length && this.formData.contact
    }
  },
  methods: {
    goBack() {
      if(String(this.$route.query.close)=='true') {
        jsBridge.closeWindow();
      }else {
        this.$router.back();
      }
    },
    limitVal(text) {
      return text.trim()
    },
    onSubmit() {
      if(!this.disabled || this.submitStatus) {
        return;
      }
      if(this.formData.feedback.length<10) {
        Toast('请输入10字以上的建议');
        return;
      }
      if(!/^1[0123456789]\d{9}$/.test(this.formData.contact)) {
        Toast('请输入正确的手机号码');
        return;
      }
      this.submitStatus = true;
      this.ajax({
        url: '/newapp/feedback.do',
        type: "POST",
        data: this.formData,
        controlLoading: false,
      }).then(res => {
        if(res.success) {
          let instance = Toast('提交成功，感谢您的支持');
          setTimeout(() => {
            instance.close();
            this.goBack();
          }, 1500);
        }else {
          Toast(res.msg || '服务错误,稍后重试');
          this.submitStatus = false;
        }
      }).catch(err => {
        Toast('服务错误,稍后重试');
        this.submitStatus = false;
      });
    },
    showImg: function(url) {
      let urlArr = [];
      urlArr.push(url)
      try {
        jsBridge.viewPicture(
          {files: urlArr},
          function(params) {
          }
        );
      }catch(e) {
        Toast("预览失败");
      }
    },
    uploadImg: function() {
      var _this = this;
      _this.actions = [{
        name: "拍照",
        method: function() {
          jsBridge.selectPicture(
            { options: "拍照", noCrop: true, compress: { sizeLimit: "1", unit: "M" }},
            function(result) {
              _this.doUploadPic(result);
            },
            function(result) {

            }
          );
        }
      },{
        name: "选择图片",
        method: function() {
          jsBridge.selectPicture(
            {
              options: "选择图片",
              noCrop: true,
              compress: { sizeLimit: "1", unit: "M" }
            },
            function(result) {
              _this.doUploadPic(result);
            },
            function(result) {

            }
          );
        }
      }];
      this.chooseVisible = true;
      return false;
    },
    delImage(index) {
      this.formData.picUrls.splice(index, 1);
    },
    //上传图片到服务器
    doUploadPic: function(result) {
      let url = window.APP.serverUrl + "/newapp/img/uploadShopImg.do";
      jsBridge.doUploadPic(
        {
          url: url,
          file: result.resultObject,
          data: {},
          compress: { sizeLimit: "1", unit: "M" }
        },
        (result) =>{
          if(result && result.success) {
            let uploadResult = result.resultObject;
            if(uploadResult && uploadResult.imageUrl) {
              let imageUrl = config.previewUrlPrefix + uploadResult.imageUrl;
              this.formData.picUrls.unshift(imageUrl);
            }
            return;
          }
          Toast(result.msg || "上传失败");
        },
        function(result) {

        }
      );
    }
  }
};
</script>

<style>
.cell-ipt {
  text-align: right!important;
}
</style>
<style lang='scss' scoped>
@import "../../style/public";
.disabled {
  background-color: #999!important;
}
.notice {
  background: #fdfcec;
  @include remCalc(font-size, 20);
  @include remCalc(height, 60);
  @include remCalc(line-height, 60);
  @include remCalc(padding, 0, 30);
  color: #f87c36;
  display: inline-flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  i {
    @include remCalc(font-size, 32);
    @include remCalc(padding-right, 12);
  }
}
.btn {
  width: 100%;
  @include remCalc(font-size, 36);
  @include remCalc(height, 88);
  @include remCalc(line-height, 88);
  background: #459dff;
  color: #fff;
  text-align: center;
}
.cell {
  @include remCalc(padding, 30);
  @include remCalc(margin-bottom, 20);
  background-color: #fff;
  &-title {
    @include remCalc(font-size, 32);
    color: #333;
  }
  &-subtitle {
    @include remCalc(margin, 20, 0, 10, 0);
    @include remCalc(font-size, 26);
    color: #666;
  }
  &-textarea {
    width: 100%;
    background: #F8F8F8;
    border: 1px solid #E8E8E8;
    box-sizing: border-box;
    @include remCalc(height, 240);
    @include remCalc(font-size, 26);
    @include remCalc(border-radius, 8);
    @include remCalc(padding, 10, 15);
  }
  &-ul {
    overflow: hidden;
    @include remCalc(width, 708);
    @include remCalc(margin-left, -20);
    >li {
      @include remCalc(width, 216);
      @include remCalc(height, 136);
      @include remCalc(margin, 20, 0, 20, 20);
      float: left;
      box-sizing: border-box;
      background: #F9F9F9;
      border: 1px solid #ddd;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      img {
        @include remCalc(max-width, 216);
        @include remCalc(max-height, 136);
      }
      .zhk-sbylx {
        position: absolute;
        color: #999;
        @include remCalc(top, 3);
        @include remCalc(right, 3);
      }
    }
  }
  &-field {
    @include remCalc(margin, 0, -30, -30, -30);
  }
}
</style>
